<template xmlns="">
  <a-layout style="height: 100%">
    <a-layout-sider :trigger="null">
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" mode="inline" style="height: 100%">
        <div style="height: 50px; display: flex">
          <div style="padding: 10px">
            <img
                src="../assets/logo.png"
                object-cover="fit"
                alt="logo"
                style="width: 50px"
            />
          </div>
          <div style="line-height: 70px; font-size: 15px; font-weight: 800; color: #181818">
            数据库同步工具
          </div>
        </div>
        <a-divider style="background-color: #F5F5F5"/>
        <a-menu-item key="databaseSync">
          <span>数据库同步</span>
        </a-menu-item>
        <a-menu-item key="databaseManager">
          <span>数据管理</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
      </a-layout-header>
      <a-layout-content
          :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <RouterView/>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons-vue';
const selectedKeys = ref<string[]>(['1']);
</script>
<style>

</style>